import React, { Component, Fragment } from 'react'
import { Icon, Divider, Input, Button } from 'antd';
import avatorURL from '../../../../../../images/profile photo.jpg'
import ChildrenComment from './ChildrenComment';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_tmmgc0c11d.js',
// });

export default class CommentItem extends Component {
    constructor(props) {
        super(props);

        this.state = {
            commentObjName: '',
            commentObjID: null, // 被评论人的userID
            isComment: false, // false 则 input 不显示
            isShowChildrenComments: false, // false 则子评论不显示
        }
    }

    // 处理点击子评论回复
    handleComment = (id, nickname) => { // id为被评论人的id
        this.setState({
            commentObjID: id,
            commentObjName: nickname,
            isComment: true
        });
    }

    // 是否批量渲染子评论组件
    judgeShowChildrenComments = (item) => {
        return (
            item.childrenComments.map((childrenItem, index) => {
                return <ChildrenComment
                    key={index}
                    item={childrenItem}
                    handleComment={this.handleComment}
                    isShowChildrenComments={this.state.isShowChildrenComments}
                />
            })
        )
    }

    // 是否显示子评论
    handleShowChildren = () => {
        this.setState({
            isShowChildrenComments: true
        });
    }

    render() {
        let { item } = this.props;
        let createTime = new Date(Number(item.createTime));
        let year = createTime.getFullYear();
        let month = createTime.getMonth() + 1;
        let date = createTime.getDate();
        let hour = createTime.getHours();
        let minute = createTime.getMinutes();

        let commentObjName = '写下你的评论';
        if (this.state.commentObjName.length !== 0) {
            commentObjName = `回复 ${this.state.commentObjName}：`;
        }
        return (
            <Fragment>
                <Divider />
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    paddingLeft: 20,
                    paddingRight: 20,
                    marginBottom: 20
                }}>
                    <img src={avatorURL} alt="头像" width={50} height={50} style={{
                        borderRadius: '50%',
                        marginRight: 10
                    }} />
                    <div style={{
                        width: 800
                    }}>
                        <div style={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}>
                            <div style={{
                                color: '#bbb',
                                marginBottom: 5,
                                fontSize: 18
                            }}>{item.commentNickname}</div>
                            <div style={{
                                width: 100,
                                color: '#ddd'
                            }}>{`${year}-${month}-${date} ${hour}:${minute}`}</div>
                        </div>
                        <div style={{
                            width: 800,
                            marginBottom: 10
                        }}>{item.content}</div>
                        <div style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            marginBottom: 10
                        }}>
                            <div style={{
                                color: '#bbb',
                                cursor: 'pointer'
                            }} onClick={this.handleShowChildren}>{`${item.childrenComments.length} 评论`}</div>
                            <div>
                                <span
                                    className="anticon-portal anticonpinglun"
                                    style={{
                                        fontSize: 20,
                                        color: '#ddd',
                                        marginRight: 5
                                    }}
                                ></span>
                                <span style={{
                                    color: '#ddd',
                                    fontSize: 16,
                                    lineHeight: '6px',
                                    cursor: 'pointer'
                                }} onClick={() => { this.handleComment(item.userid, '') }}>评论</span>
                            </div>
                        </div>
                        {
                            this.judgeShowChildrenComments(item)
                        }
                        <div style={{
                            display: (this.state.isComment ? 'flex' : 'none'),
                            justifyContent: 'space-between',
                            paddingTop: 20,
                        }}>
                            <Input placeholder={commentObjName} style={{
                                width: 700
                            }} />
                            <Button type="primary">回复</Button>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}
